/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";
import "./index.scss";
import axios from "axios";

export default function Maps({
  lon,
  lat,
  id,
}: {
  lon: number | string;
  lat: number | string;
  id: number;
}) {
  const [Key] = useState<string>("e35069d2a4accd0ad0f6b52ead59aedd"); //高德显示key

  async function editLonLat(lon: number, lat: number) {
    const obj = { lon: String(lon), lat: String(lat), id };
    const { data } = await axios.post(
      "http://127.0.0.1:3100/zsl/editStoreSetting",
      obj
    );
    console.log(data, "修改了··········");
  }

  // 圆形围栏
  const cricle = () => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    let map = null;
    AMapLoader.load({
      key: Key, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map("circle", {
          // 设置地图容器id
          zoom: 18, // 初始化地图级别
          center: [lon, lat], // 初始化地图中心点位置
        });
        const circles = new AMap.Circle({
          center: [lon, lat], //圆心
          radius: 1000, //半径
          borderWeight: 3, //描边宽度
          strokeColor: "#FF33FF", //轮廓线颜色
          strokeOpacity: 0.1, //透明度
          strokeWeight: 6, //轮廓线宽度
          fillOpacity: 0.4, //原型填充透明度
          strokeStyle: "dashed", //样式
          strokeDasharray: [10, 10],
          // 线样式还支持 'dashed'
          fillColor: "#1791fc", //圆形填充颜色
          zIndex: 50, //圆形覆盖物的叠加顺序
        });
        map.add(circles);
        // 缩放地图到合适的视野级别
        map.setFitView([circles]);

        //点击地图重新设置圆形的中心点
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        map.on("click", function (ev: { lnglat: any }) {
          //触发事件的地理坐标，AMap.LngLat 类型
          const lnglat = ev.lnglat;
          //将点击的位置设为圆形中心点
          circles.setCenter([lnglat.lng, lnglat.lat]);
          editLonLat(lnglat.lng, lnglat.lat);
        });
      })
      .catch((e) => {
        console.log(e);
      });
  };
  useEffect(() => {
    cricle();
  }, [lon]);

  return (
    <div>
      <div className="storeTopLeft" id="circle"></div>
    </div>
  );
}
